<template>
  <div class="container">
    <div class="app-container">
      <el-tree highlight-current :expand-on-click-node="false" style="width: 80%" default-expand-all :data="depts" :props="defaultProps">
        <!--        1、自定义tree的结构，插槽，用到内部数据，作用域插槽-->
        <template v-slot="{data}">
          <el-row type="flex" align="middle" style="width: 100%; height: 40px">
            <el-col>{{ data.name }}</el-col>
            <!--span表示占据4份，默认总共24份-->
            <el-col :span="4">
              <span style="margin-right: 10px;">管理员</span>
              <!--绘制下拉菜单结构-->
              <el-dropdown @command="clickItem($event, data.id)">
                <!--显示区域的内容-->
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <!--下拉菜单选项 通过dropdown插槽指定-->
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="add">添加子部门</el-dropdown-item>
                  <el-dropdown-item command="edit">编辑部门</el-dropdown-item>
                  <el-dropdown-item command="del">删除</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown>
            </el-col>
          </el-row>
        </template>
      </el-tree>
    </div>
    <AddDept ref="addDeptRef" :current-node-id="currentNodeId" :show-dialog.sync="showDialog" @updateDeparts="getDepartments" />
  </div>
</template>
<script>
import { delDepartment, getDepts } from '@/api/deparment'
import { transListToTree } from '@/utils'
import AddDept from '@/views/department/components/add-dept.vue'

// 传递给tree的数据，满足什么条件就是一个树形，要有children子节点才是一个树形。
// 处理的原则：每一个部门的pid等于他父亲的id

export default {
  name: 'Department',
  components: { AddDept },
  data() {
    return {
      showDialog: false, // 控制弹层显示的标识
      depts: [{
        name: '传智教育',
        // 默认children为子节点
        children: [
          { name: '总裁办' },
          { name: '行政部' },
          { name: '财务部' }
        ]
      }],
      defaultProps: {
        label: 'name'
        // children: 'children' // 指定子节点
      },
      currentNodeId: null // 当前点击的部门的id
    }
  },
  created() {
    this.getDepartments()
  },
  methods: {
    test() {
      this.$nextTick(() => {
        console.log('能不能获取到更新之后的最新dom结构') //
      })
      this.showDialog = true
    },
    async clickItem(type, id) {
      // 这里的id需要保存到data里面之后，才可以传递给子组件。
      // nextTick：数据更新以后，模板的编译并不是同步进行。
      // 不能立即获取到更新之后的最新的dom结构。
      // 如何才能够获取更新之后的最新dom结构 >> 通过nextTick再注册一个异步任务即可
      this.currentNodeId = id
      if (type === 'add') {
        console.log('点击的是添加')
        this.showDialog = true
      } else if (type === 'edit') {
        console.log('点击的是编辑')
        this.showDialog = true
        this.$nextTick(() => {
          this.$refs.addDeptRef.getDepartDetail() // this.currentNodeId的
        })
      //   数据回显
      //   会在子组件定义数据回显的方法，当父组件点击了编辑的时候，父组件通过ref调用子组件的方法
      } else {
        // 1、弹出确认弹层
        await this.$confirm('是否确认删除当前部门数据')
        // 2、调用删除方法
        await delDepartment(id)
        // 3、进行成功提示
        this.$message.success('删除成功')
        // 4、重新获取数据
        this.getDepartments()
      }
    },
    // 用户更新当前最新部门数据的方法
    async getDepartments() {
      // 获取到的数据赋值给depts
      const res = await getDepts()
      console.log(res)
      this.depts = transListToTree(res, 0)
      // depts里面的数据有什么特点？
    }
  }
}
</script>

<style>
.app-container {
  font-size: 14px;
}
</style>
